"use client";
import { useState, useEffect } from "react";
import "./page.scss";
import Card, { CardItem } from "@/common/Card";

const mockList = [
  {
    id: 1,
    title: "标题1",
    content:
      "我是内容1是是去金额将全额加强饿了就去了金额全额去金额去金额全额家全额加强饿",
    img: "https://img.yzcdn.cn/vant/ipad.png",
    time: "2021-01-01",
    author: "作者1",
    tag: "标签1",
  },
  {
    id: 2,
    title: "标题2",
    content:
      "我是内容2是是去金额将全额加强饿了就去了金额全额去金额去金额全额家全额加强饿",
    img: "https://img.yzcdn.cn/vant/ipad.png",
    time: "2021-01-01",
    author: "作者2",
    tag: "标签2",
  },
  {
    id: 3,
    title: "标题3",
    content:
      "我是内容3是是去金额将全额加强饿了就去了金额全额去金额去金额全额家全额加强饿",
    img: "https://img.yzcdn.cn/vant/ipad.png",
    time: "2021-01-01",
    author: "作者3",
    tag: "标签3",
  },
];
export default function Home() {
  const [activeCategory, setActiveCategory] = useState<Record<string, any>[]>(
    []
  );
  const [activeKey, setActiveKey] = useState<number>(1);
  const [secondCategory, setSecondCategory] = useState<Record<string, any>[]>(
    []
  );
  const [secondActiveKey, setSecondActiveKey] = useState<number>(1);
  const [list, setList] = useState<CardItem[]>([]);

  useEffect(() => {
    setActiveCategory([
      {
        title: "日常生活",
        id: 1,
      },
      {
        title: "技术",
        id: 2,
      },
    ]);
    setSecondCategory([
      {
        title: "推荐",
        id: 1,
      },
      {
        title: "最新",
        id: 2,
      },
    ]);
    setActiveKey(1);
    setList(mockList);
  }, []);
  return (
    <div className="flex mt-10">
      <div className="category-container w-1/6 mr-16 bg-white ">
        <div className="category-item border-1 border-gray-300 text-black  rounded-lg p-4">
          {activeCategory.map((item) => (
            <div
              key={item.id}
              className={`category-item-title p-2 cursor-pointer text-sm text-center ${
                activeKey === item.id ? "bg-black text-white" : ""
              }`}
              onClick={() => setActiveKey(item.id)}
            >
              {item.title}
            </div>
          ))}
        </div>
      </div>
      <div className="content w-5/6">
        <div className="content-item  box-shadow-lg text-black  p-4 border-1 border-gray-300 rounded-lg">
          <div className="content-category flex border-b-1 border-gray-100">
            {secondCategory.map((item) => (
              <div
                key={item.id}
                className={` p-2 cursor-pointer text-sm text-center ${
                  secondActiveKey === item.id ? "border-b-1 border-black" : ""
                }`}
                onClick={() => setSecondActiveKey(item.id)}
              >
                {item.title}
              </div>
            ))}
          </div>
          <Card list={list} />
        </div>
      </div>
    </div>
  );
}
